import { RightOutlined, UploadOutlined } from '@ant-design/icons';
import React from 'react';
import { Upload, Button, Tag } from 'antd';
import axios from 'axios';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: "wating to be checked",
      link: []
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.status}</h1>
        {this.state.link.map(data => (<Tag><RightOutlined />{data.did}</Tag>))}
        <Upload name='file' accept='json' beforeUpload={file => {
          const reader = new FileReader();
          reader.readAsText(file);
          reader.onload = () => {
            // 获取文件内容存进tempFile
            var res = JSON.parse(reader.result);
            axios.post('/verify', res).then((resp) => {
              console.log(resp);
              this.setState({
                status: "merkleCheck" + resp.data.merkleCheck ? "success" : "failed",
                link: resp.data.link
              })
            })
          };
          return false;
        }}
        >
          <Button icon={<UploadOutlined />}>Click to Upload</Button>
        </Upload >
        {/* <Button onClick={() => {
          
        }}>submit</Button> */}
      </div>
    );
  }
}

export default App;
